<template>
  <div class="linebox">
    <!-- <div class="title">
            {{ props.piedata.date }}年党员工作岗位占比
        </div> -->
    <div id="line"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
const props = defineProps({
  sexlist: Array,
});
const list = reactive({
  yData: [10, 120, 220, 160, 160, 280, 110, 200, 220, 160, 130, 150],
  xdata: [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月",
    "7月",
    "8月",
    "9月",
    "10月",
    "11月",
    "12月",
  ],
  sex: [
    { value: 1048, name: "男" },
    { value: 735, name: "女" },
  ],
});

function getSymbolData(datas) {
  let arr = [];
  for (var i = 0; i < datas.length; i++) {
    arr.push({
      value: datas[i],
      symbolPosition: "end",
    });
  }
  return arr;
}

// watch(
//   () => props.piedata,
//   (val) => {
//     let myChart = echarts.init(document.getElementById("line"));
//     list.listdata = props.piedata.data;
//     drawecharts(myChart);
//     window.onresize = function () {
//       //自适应大小
//       myChart.resize();
//     };
//   }
// );
onMounted(() => {
  let myChart = echarts.init(document.getElementById("line"));

  drawecharts(myChart);
  window.onresize = function () {
    //自适应大小
    myChart.resize();
  };
  myChart.on("updateAxisPointer", function (a) {
    // if(a.dataIndex!=0){
    // const num1 = Math.random() * 100;
    // const num2 = Math.random() * 100;
    if (a.dataIndex) {
      // console.log("移入");
      const selectdata = props.sexlist.filter((data) => {
        return data.dataIndex.indexOf(a.dataIndex.toString()) !== -1;
      });
      // console.log(a);
      // console.log("sdca",selectdata[0].data);

      list.sex = [];
      list.sex = selectdata[0].data;
      drawecharts(myChart);
    }

    // unemphasis();
    // }
  });
  onUnmounted(() => {
    if (myChart) {
      // console.log(myChart,"已经清空");
      myChart.clear();
      myChart.dispose();
      //   myChart = null;
    }
  });
});

const drawecharts = (myChart) => {
  // 绘制图表
  myChart.setOption({
    // backgroundColor: "#000",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      textStyle: {
        fontSize: 18,
      },
      backgroundColor: "rgba(255,255,255,1)",
      extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
    },
    grid: {
      top: "15%",
      left: "3%",
      right: "3%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: [
      {
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        axisLabel: {
          color: "#A1BADF",
          fontSize: 24,
          interval: "auto", // x轴间距
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(152, 212, 255, .1)",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "人数",
        nameGap: "30",
        axisLabel: {
          show: true,
          fontSize: 24,
          color: "#A1BADF",
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(152, 212, 255, .1)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(152, 212, 255, .1)",
          },
        },
        name: "(单位/人)",
        nameTextStyle: {
          color: "#A1BADF",
          fontWeight: 400,
          fontSize: 24,
        },
      },
    ],
    series: [
      {
        name: "入党积极分子",
        type: "line",
        data: [10, 120, 220, 160, 160, 280, 110, 200, 220, 160, 130, 150],
        showSymbol: true,
        // smooth: true,
        symbol: "circle",
        symbolSize: 10,
        lineStyle: {
          color: "#F9DF2B",
        },
        itemStyle: {
          color: "#F9DF2B",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: -0.2,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(255, 230, 0, 0.54)",
              },
              {
                offset: 1,
                color: "rgba(255, 230, 0, 0)",
              },
            ],
          },
        },
      },
      {
        name: "入党人数",
        yAxisIndex: 0,
        type: "bar",
        barWidth: 20,
        data: [10, 120, 220, 160, 160, 280, 110, 200, 220, 160, 130, 150],
        showBackground: true,
        backgroundStyle: {
          color: "rgba(12, 72, 167, 0.3)",
        },
        label: {
          show: false,
          position: "top",
          color: "#00A8FF",
        },
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: -0.2,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#0599FF",
                },
                {
                  offset: 1,
                  color: "#77E9FF",
                },
              ],
            },
            barBorderRadius: [2, 2, 0, 0],
          },
        },
      },

      {
        name: "男女人数",
        type: "pie",
        radius: ["10%", "20%"],
        label: {
          normal: {
            show: true,
            formatter: function (param) {
              // console.log(param)
              let style = "";
              switch (param.name) {
              }
              return (
                "" + param.name + "\n\n" + "{" + style + param.percent + "%}"
              );
            },
            textStyle: {
              fontSize: 14,
            },
            position: "outside",
          },
          emphasis: {
            show: true,
          },
        },
        data: list.sex,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        center: ["74%", "94"],
      },
    ],
  });
  // myChart.on('mouseover', function(a){
};
</script>

<style lang="scss" scoped>
.linebox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title {
    align-items: center;
    // background-color: aqua;
    font-size: 20px;
    font-weight: 900;
  }
  #line {
    width: 100%;
    height: 100%;
  }
}
</style>
